<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 权限事务缓存系统</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .table th, .table td {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/permission-system">权限事务缓存系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/permission-system/users">用户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system/roles">角色管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system/permissions">权限管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container my-5">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">
                    <i class="fas fa-users mr-2"></i>用户管理
                </h4>
            </div>
            <div class="card-body">
                <!-- 错误提示区域 -->
                <div id="userError" class="alert alert-warning alert-dismissible fade" role="alert" style="display: none;">
                    <strong>提示：</strong>
                    <span></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <!-- 用户列表表格 -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr class="bg-light">
                                <th scope="col">用户ID</th>
                                <th scope="col">用户名</th>
                                <th scope="col">角色</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody id="userTableBody">
                            <!-- 用户数据将通过JavaScript动态加载 -->
                            <tr>
                                <td colspan="4" class="text-center">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 设置用户角色模态框 -->
    <div class="modal fade" id="setRoleModal" tabindex="-1" aria-labelledby="setRoleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="setRoleModalLabel">设置用户角色</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="currentUserId">
                    <div class="mb-3">
                        <label for="userName" class="form-label">用户名称</label>
                        <input type="text" class="form-control" id="userName" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">选择角色</label>
                        <div id="roleList" class="list-group">
                            <!-- 角色列表将通过JavaScript动态加载 -->
                            <div class="text-center py-3">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveRoleBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let rolesData = [];

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadRoles();
            loadUsers();
            
            // 保存角色按钮点击事件
            document.getElementById('saveRoleBtn').addEventListener('click', saveUserRoles);
        });

        // 加载角色列表
        function loadRoles() {
            fetch('/permission-system/api/roles')
                .then(response => response.json())
                .then(data => {
                    console.log('API返回的原始角色数据:', data);
                    
                    // 检查数据格式 - 后端返回格式为 {code: 200, message: "success", data: [...]}
                    if (Array.isArray(data)) {
                        // 如果返回的是数组，直接使用
                        console.log('使用数组格式角色数据');
                        rolesData = data;
                    } else if (data.code === 200 && data.data) {
                        // 如果符合后端标准格式，使用data.data
                        console.log('使用后端标准格式角色数据');
                        rolesData = data.data;
                    } else {
                        console.log('角色数据格式不匹配:', data);
                        showToast('加载角色失败，请稍后重试', 'error');
                    }
                })
                .catch(error => {
                    console.error('加载角色失败:', error);
                    showToast('加载角色列表失败，请重试', 'error');
                });
        }

        // 加载用户列表
        function loadUsers() {
            fetch('/permission-system/api/users')
                .then(response => response.json())
                .then(data => {
                    // 添加详细日志
                    console.log('API返回的原始数据:', data);
                    console.log('data.code:', data.code);
                    console.log('data.data:', data.data);
                    console.log('Array.isArray(data):', Array.isArray(data));
                    
                    // 检查数据格式 - 后端返回格式为 {code: 200, message: "success", data: [...]}
                    if (Array.isArray(data)) {
                        // 如果返回的是数组，直接使用
                        console.log('使用数组格式数据');
                        renderUserTable(data);
                    } else if (data.code === 200 && data.data) {
                        // 如果符合后端标准格式，使用data.data
                        console.log('使用后端标准格式数据');
                        renderUserTable(data.data);
                    } else {
                        // 其他情况尝试提取用户数据
                        console.log('数据格式不匹配，详细数据:', data);
                        showToast('加载用户失败，请稍后重试', 'error');
                    }
                })
                .catch(error => {
                    console.error('加载用户失败:', error);
                    showToast('加载用户列表失败，请重试', 'error');
                });
        }

        // 渲染用户表格
        function renderUserTable(users) {
            const tableBody = document.getElementById('userTableBody');
            tableBody.innerHTML = '';
            
            if (users && users.length > 0) {
                users.forEach(user => {
                    const row = document.createElement('tr');
                    
                    // 获取用户角色显示
                    let rolesHtml = '-';
                    if (user.roles && user.roles.length > 0) {
                        rolesHtml = user.roles.map(role => 
                            `<span class="badge bg-primary">${role.name}</span>`
                        ).join(' ');
                    }
                    
                    row.innerHTML = `
                        <td>${user.id}</td>
                        <td>${user.username}</td>
                        <td>${rolesHtml}</td>
                        <td>
                            <button class="btn btn-primary btn-sm" onclick="openSetRoleModal(${user.id}, '${user.username}')">
                                <i class="fas fa-user-tag"></i> 设置角色
                            </button>
                        </td>
                    `;
                    
                    tableBody.appendChild(row);
                });
            } else {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="4" class="text-center">暂无数据</td>
                    </tr>
                `;
            }
        }

        // 打开设置角色模态框
        function openSetRoleModal(userId, username) {
            document.getElementById('currentUserId').value = userId;
            document.getElementById('userName').value = username;
            
            // 清空角色列表
            const roleListDiv = document.getElementById('roleList');
            roleListDiv.innerHTML = '';
            
            // 加载用户当前角色
            fetch(`/permission-system/api/users/${userId}/roles`)
                .then(response => response.json())
                .then(data => {
                    let userRoles = [];
                    
                    // 检查数据格式，保持一致的处理逻辑
                    if (data.roles) {
                        // 如果直接包含roles字段
                        userRoles = data.roles || [];
                    } else if (data.success && data.data && data.data.roles) {
                        // 如果符合标准格式
                        userRoles = data.data.roles || [];
                    } else if (Array.isArray(data)) {
                        // 如果返回的是角色数组
                        userRoles = data;
                    }
                    
                    console.log('用户角色数据:', data, '提取的角色:', userRoles);
                    
                    // 渲染角色选择列表
                    if (rolesData.length > 0) {
                        rolesData.forEach(role => {
                            const isChecked = userRoles.some(r => r.id === role.id);
                            
                            const roleItem = document.createElement('div');
                            roleItem.className = 'list-group-item';
                            roleItem.innerHTML = `
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="role-${role.id}"
                                           value="${role.id}" ${isChecked ? 'checked' : ''}>
                                    <label class="form-check-label" for="role-${role.id}">
                                        <strong>${role.name}</strong>
                                        <span class="text-muted ml-2">${role.description || ''}</span>
                                    </label>
                                </div>
                            `;
                            roleListDiv.appendChild(roleItem);
                        });
                    } else {
                        roleListDiv.innerHTML = '<div class="text-center text-muted">暂无角色数据</div>';
                    }
                })
                .catch(error => {
                    console.error('加载用户角色失败:', error);
                    roleListDiv.innerHTML = '<div class="text-center text-danger">加载角色失败</div>';
                });
            
            // 显示模态框
            const setRoleModal = new bootstrap.Modal(document.getElementById('setRoleModal'));
            setRoleModal.show();
        }

        // 保存用户角色
        function saveUserRoles() {
            const userId = document.getElementById('currentUserId').value;
            const checkedRoles = [];
            
            // 收集选中的角色
            document.querySelectorAll('#roleList input[type="checkbox"]:checked').forEach(checkbox => {
                checkedRoles.push(parseInt(checkbox.value, 10));
            });
            
            // 发送请求保存角色
            fetch(`/permission-system/api/users/${userId}/roles`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(checkedRoles)
            })
            .then(response => response.json())
            .then(data => {
                console.log('保存角色API返回数据:', data);
                // 后端返回格式为 {code: 200, message: "success", data: [...]}
                if (data.code === 200) {
                    showToast('角色设置成功', 'success');
                    
                    // 关闭模态框
                    const setRoleModal = bootstrap.Modal.getInstance(document.getElementById('setRoleModal'));
                    setRoleModal.hide();
                    
                    // 重新加载用户列表
                    loadUsers();
                } else {
                    console.log('保存角色响应:', data);
                    showToast(data.message || '角色设置失败，请稍后重试', 'error');
                }
            })
            .catch(error => {
                console.error('保存角色失败:', error);
                showToast('保存失败，请重试', 'error');
            });
        }

        // 显示提示框
        function showToast(message, type = 'info') {
            const errorDiv = document.getElementById('userError');
            const errorSpan = errorDiv.querySelector('span');
            
            errorSpan.textContent = message;
            
            // 设置样式
            errorDiv.className = 'alert alert-dismissible fade show';
            
            if (type === 'error') {
                errorDiv.classList.add('alert-danger');
            } else if (type === 'success') {
                errorDiv.classList.add('alert-success');
            } else {
                errorDiv.classList.add('alert-info');
            }
            
            errorDiv.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                errorDiv.classList.remove('show');
                errorDiv.style.display = 'none';
            }, 3000);
        }
    </script>
</body>
</html>